<template>
  <div id="app" class="wrapper">
    <itemTalk />
    <JwChat-index
            ref="chatui"
            :config="config"
            :taleList="list"
            @enter="bindEnter"
            @sendManualServiceItem="sendManualServiceItem"
            v-model="inputMsg"
            :toolConfig="tool"
            :showRightBox='false'
            scrollType="norell"
            @clickTalk="talkEvent"
    >
      <!-- <JwChat-rightbox class="rightSlot" :config="rightConfig" @click="rightClick" /> -->
      <!-- <JwChat-talk class="rightSlot" :Talelist="talk" :config="quickConfig" @event="bindTalk" /> -->
      <!--<b slot="tools">H</b>-->
    </JwChat-index>
  </div>
</template>

<script>
  import itemTalk from '@/chats/Chat/itemTalk'
  import avatar from '@/assets/logo.png'
  import movie from '@/assets/movie.mp4'
  import imageA from '@/assets/a.jpg'
  import version from '@/version'

  export default {
    components: { itemTalk },
    data () {
      return {
        num: 5000,
        inputMsg: '',
        list: [],
        tool: {
          // show: ['file', 'history', 'img', ['文件1', '', '美图']],
          // showEmoji: false,
          callback: this.toolEvent
        },
        rightConfig: {
          listTip: '当前在线',
          // notice: '【公告】这是一款高度自由的聊天组件，基于AVue、Vue、Element-ui开发。点个赞再走吧 ',
          list: []
        },
        quickConfig: {
          nav: ['快捷回复', '超级回复'],
          showAdd: true,
          maxlength: 200,
          showHeader: true,
          showDeleteBtn: true,
        },
        talk: [
          '快捷回复1',
          '快捷回复2',
          '快捷回复3',
          '快捷回复4',
          '快捷回复5',
          '快捷回复6',
        ],
        config: {
          window:'minimum', // 窗口大小 minimum:迷你窗; normal: 普通窗口
          img: avatar,
          name: 'JwChat',
          dept: '最简单、最便捷',
          callback: this.bindCover,
          historyConfig:{
            tip: '加载更多',
            callback: this.bindLoadHistory,
          }
        },
      }
    },
    methods: {
      triggerUploadChange(type, data){
        this.$refs.chatui.triggerUploadChange(type, data);
      },
      sendManualServiceItem(data){

      },
      bindLoadHistory () {
        const history = new Array(3).fill().map((i, j) => {
          return {
            date: '2020-11-17 17:40',
            body: {body: '历史消息' + new Date().getTime()},
            mine: false,
            userName: '李四',
            img: avatar,
            type: 'TEXT',
          }
        });
        this.$refs.chatui.triggerLoading({loading:true});
        let list = history.concat(this.list);
        this.list = list;
        // console.log('加载历史', list, history)
        setTimeout(()=>{
          this.$refs.chatui.triggerLoading({loading:false});
        }, 1*1000);
      },
      change () {
        this.num++
      },
      talkEvent (play) {
        // console.log(play)
      },
      bindEnter () {
        const msg = this.inputMsg
        if (!msg) return;
        const msgObj = {
          date: '2020-11-17 17:40',
          body: {body: msg},
          mine: true,
          userName: '张三',
          img: avatar,
          type: 'TEXT',
        };
        this.list.push(msgObj)
      },
      toolEvent (type, plyload) {
        // console.log('tools', type, plyload)
      },
      bindCover (type) {
        // console.log('header', type)
      },
      rightClick (type) {
        // console.log('rigth', type)
      },
      bindTalk (play) {
        // console.log('talk', play)
      }
    },
    mounted () {
      this.list = [
        {
          date: '2020-11-17 17:40',
          body: {body: '聊天'},
          mine: true,
          userName: '张三',
          img: avatar,
          type: 'TEXT',
        },
        {
          date: '2020-11-17 17:40',
          body: {body: '聊天'},
          mine: false,
          userName: '李四',
          img: avatar,
          type: 'TEXT',
        },
        {
          date: '2020-12-15 18:20',
          body: {
            body: '',
            name: '张三的视频.mp4',
            localExtra: {
              uploaded: false,
              fileId: 1,
              percent: 0
            }
          },
          mine: true,
          userName: '张三',
          img: avatar,
          type: 'VIDEO',
        },
        {
          date: '2020-12-15 18:30',
          body: {
            body: '',
            name: '发送文件.mp4',
            localExtra: {
              uploaded: false,
              fileId: 1,
              percent: 0
            }
          },
          mine: true,
          userName: '张三',
          img: avatar,
          type: 'FILE',
        },
        {
          date: '2020-12-15 18:44',
          // 'text': {'text': msg},
          body: {
            body: imageA
          },
          mine: true,
          userName: '张三',
          img: avatar,
          type: 'IMAGE',
        },
        {
          date:  '2020-12-15 18:45',
          body: {body: {name: ['常见问题', '人工客服']}},
          mine: false,
          userName: '功能菜单',
          img: avatar,
          type: 'LOCAL_CARD',
          local: true // 这是一个本地消息, 不会跟服务器同步.
        },
        {
          date:  '2020-12-15 18:45',
          body: {
            thumbnailUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1498524886,1603895806&fm=26&gp=0.jpg',
            title: '同城果鲜 进口车厘子京东新鲜水果1kg 单果约-30kg',
            price: 118.0
          },
          mine: true,
          userName: '张三',
          img: avatar,
          type: 'CUSTOMER_GOOD',
        }
        ,
        {
          date:  '2020-12-15 18:45',
          body: {
            code: 'O112233445566',
            thumbnailUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1498524886,1603895806&fm=26&gp=0.jpg',
            title: '同城果鲜 进口车厘子京东新鲜水果1kg 单果约-30kg',
            price: 178.0
          },
          mine: true,
          userName: '张三',
          img: avatar,
          type: 'CUSTOMER_ORDER',
        }
      ];
      // 更改标题文字
      setTimeout(()=>{
        let config = this.config;
        config.name = 'E聊SDK_' + version.version;
        config.dept = 'E聊SDK, 一个开源的IM解决方案';
        this.config = config;
      },1000);


      // 模拟视频消息上传完成
      setTimeout(()=>{
        this.triggerUploadChange('UPLOADING', {id: 1, percent:50});
        setTimeout(()=>{
          this.triggerUploadChange('UPLOADED', {id: 1, url:movie});
        },1000)
      },1000);
      // 模拟文件消息上传完成
      setTimeout(()=>{
        this.triggerUploadChange('UPLOADING', {id: 1, percent:50});
        setTimeout(()=>{
          this.triggerUploadChange('UPLOADED', {id: 1, url:movie});
        },1000)
      },1000)


    }
  }
</script>
<style scoped>
  .rightSlot {
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
  }
</style>
<style>
  .active {
    color: red;
  }
  * {
    padding: 0;
    margin: 0;
  }
  body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-image: linear-gradient(to bottom right, #7a88ff, #7affaf);
  }
  #app {
    height: 100vh;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
